<!-- @format -->

<template>
  <!-- 一门清页面 -->
  <view class="easyClear">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClear-content" :style="[{ top: top + 'px' }]">
      <view class="content">
        <h1>{{ detail.counselTitle }}</h1>
        <view class="conLocation">
          <view>
            <view class="locationDate">
              <!-- 发布于 -->
              <text>{{ detail.publishTime }}</text>
            </view>
            <!-- <view class="locationName">{{ detail.slopeName }}</view> -->
          </view>
          <button class="ortopShareBtn" open-type="share" hover-class="none">
            <view class="conShare">
              <image src="../../../static/index/share.png" mode="scaleToFill" />
              <!-- <view class="text" open-type="share" @click="share"></view> -->
              <view> 分享</view>
            </view>
          </button>
        </view>

        <view class="conText">
          <rich-text class="ql-editor" :nodes="replaceContent(detail.content)">
          </rich-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      childTitle: '优惠详情',
      top: 0,
      id: 0,
      content: '',
      detail: {},
    }
  },
  onLoad(options) {
    console.log(options.id)
    this.id = options.id
    this.img = options.img
    this.title = options.title
    this.getList()
  },

  methods: {
    // 富文本添加列表边框样式
    replaceContent(content) {
      // console.log(content)
      if (content) {
        content = content.replace(/\<img/gi, '<img class="imgColor" ') //正则替换
        return content
      } else {
        return null
      }
    },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    onShareAppMessage() {
      return {
        title: this.title,
        imageUrl: this.img,
      }
    },
    onShareTimeline() {
      return {
        title: this.title,
        imageUrl: this.img,
      }
    },
    getList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.counselDetail,
        method: 'GET',
        data: {
          counselId: this.id,
        },
        success(res) {
			console.log(res)
          _this.detail = res.data.data
        },
      })
    },
  },
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f8fafe;
}
.imgColor {
  max-width: 100%;
  height: auto;
}
</style>

<style lang="scss" scoped>
.easyClear-content {
  position: absolute;
  padding: 0 30rpx;
  background: #f8fafe;
}
.content {
  margin-top: 20px;
  position: relative;
  h1 {
    font-size: 40rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #303030;
  }
  .conLocation {
    display: flex;
    margin-top: 30rpx;
    justify-content: space-between;
    .locationDate {
      font-size: 28rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #a4a4a4;
    }
    .locationName {
      font-size: 28rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #a4a4a4;
      margin-top: 24rpx;
    }
  }
  .conText {
    width: 690rpx;
    margin-top: 30rpx;
    background: #ffffff;
  }

  .conShare {
    width: 79rpx;
    height: 79rpx;
    background: #fff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;

    image {
      margin-top: 14rpx;
      width: 24.67rpx;
      height: 24.67rpx;
    }
    .text {
      font-size: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #a4a4a4;
      margin-left: 20rpx;
    }
  }
}

button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: normal;
  color: #a4a4a4;
  font-size: 20rpx;
}

button::after {
  border: none;
}
  [alt]{
  	max-width:100%;
  }
</style>
